<template>
	<view class="main">
		<view class="ul">
			<view class="li flex_align" v-for="(item, index) in recordList" :key="index">
				<view class="flex1 flex_col">
					<text class="name">{{ item.memo }}</text>
					<text class="time">{{ item.createtime }}</text>
				</view>
				<text class="num" :class="item.money > 0 ? 'on' : ''">{{ item.money > 0 ? '+' : '' }}{{ item.money }}</text>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
import { getMoneyLog } from '@/api/my'
export default {
	data() {
		return {
			status: 'nomore',
			page: 1,
			limit: 20,
			recordList: [],
		};
	},
	onLoad(e) {
		this.getRecordList('new');
	},
	onReachBottom() {
		this.getRecordList();
	},
	methods: {
		//获取数据
		getRecordList(type = '') {
			var that = this
			//清除本栏目数据
			if (type == 'new') {
				this.status = 'more';
				this.page = 1;
				this.recordList = [];
			}
			//判断状态
			if (this.status != 'more') {
				return false;
			}
			this.status = 'loading';
			let params = {
				page: this.page,
				limit: this.limit
			};
			getMoneyLog(params).then(res => {
				if (res.code == 1) {
					let list = res.data;
					if (list.length >= this.limit) {
						this.status = 'more';
					} else {
						this.status = 'noMore';
					}
					that.recordList = [...that.recordList, ...list];
					this.page++
					that.status = that.$used.pageState(that.recordList.length, list.length, 20)
				} else {
					that.$used.msg(res.msg);
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.main {
	position: relative;
	min-height: 100vh;
	background-color: #F8F8F8;
	overflow: hidden;

	.ul {
		.li {
			padding: 0 40rpx;
			height: 134rpx;
			background: #FFFFFF;

			.name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.time {
				margin-top: 6rpx;
				font-size: 22rpx;
				color: #999999;
			}

			.num {
				font-size: 28rpx;
				color: #333333;

				&.on {
					color: #FF7575;
				}
			}
		}
	}
}
</style>
